<template>
    
    <el-card class="!border-none " shadow="never">
        
        <el-form class="-mb-4" :model="queryFormData" label-width="98px" inline>
            <el-card class="!border-none mt-5" shadow="never">
                <div class="flex justify-between items-center">
                    <div>
                        <el-button type="primary" @click="handleCreateOrder()">
                            <template #icon>
                                <icon name="el-icon-Plus" />
                            </template>
                            添加计费
                        </el-button>
                    </div>
                    <div>
                        <Upload
                            mapping="crm/charge"
                            class="mr-3"
                            :data="{ id: props.id }"
                            type="excel"
                            :show-progress="true"
                            @change="refresh"
                        >
                            <el-button type="danger">本地上传</el-button>
                        </Upload>
                    </div>
                </div>
                
                <el-table
                    ref="tableRef"
                    size="large"
                    class="mt-2"
                    v-loading="pagerData.loading"
                    :data="pagerData.lists"
                    row-key="id"
                >
                    <el-table-column label="始发地" prop="origin" min-width="120"/>
                    <el-table-column label="目的地" prop="destination" min-width="120"/>
                    <el-table-column label="收费方式" prop="chargingMethod" min-width="120"/>
                    <el-table-column label="首重重量" prop="firstWeight" min-width="120"/>
                    <el-table-column label="首重价格" prop="firstWeightPrice" min-width="120"/>
                    <el-table-column label="(1, 10]" prop="weightRange1To10" min-width="120"/>
                    <el-table-column label="(10, 30]" prop="weightRange10To30" min-width="120"/>
                    <el-table-column label="(30, 50]" prop="weightRange30To50" min-width="120"/>
                    <el-table-column label="(50, 100]" prop="weightRange50To100" min-width="120"/>
                    <el-table-column label="(100, 300]" prop="weightRange100To300" min-width="120"/>
                    <el-table-column label="(300, 500]" prop="weightRange300To500" min-width="120"/>
                    <el-table-column label="(500, 1000]" prop="weightRange500To1000" min-width="120"/>
                    <el-table-column label="(1000, 2000]" prop="weightRange1000To2000" min-width="120"/>
                    <el-table-column label="(2000,∞)" prop="weightOver2000" min-width="120"/>
                    <el-table-column label="起重" prop="initialWeight" min-width="120"/>
                    <el-table-column label="最低收费" prop="minimumCharge" min-width="120"/>
                    <el-table-column label="操作人" prop="optPerson" min-width="120"/>
                    <el-table-column label="创建时间" prop="createTime" min-width="180"/>
                    <el-table-column label="更新时间" prop="updateTime" min-width="180"/>
                    
                    <el-table-column label="操作" width="170" fixed="right">
                        <template #default="{ row }">
                            <el-button
                                type="primary"
                                link
                                @click="handleEdit(row)"
                            >
                                编辑
                            </el-button>
                            
                            
                            <el-button
                                type="danger"
                                link
                                @click="handleDelete(row)"
                            >
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                
                <pagination v-model="pagerData" @change="getPageLists"/>
            
            </el-card>
        
        </el-form>
    </el-card>
    
    <Detail ref="detailRef" @close="showDetailRef=false" v-if="showDetailRef"/>


</template>

<script lang="ts" setup>
import {ref, onMounted, defineProps} from 'vue';
import Detail from "@/views/logistics/client/clientList/detail.vue";
import {useFormatterTimeManager} from "@/manager/base/FormatterManager";
import {UnwrapNestedRefs} from "@vue/reactivity";
import {usePagerManager} from "@/manager/base/PagerManager";
import {delLogisticsAdmin, getLogisticsAdminListByPage} from "@/api/logistics/CrmLogisticsAdminController";
import routerManager from "@/manager/base/RouterManager";
import router from "@/base/router";
import feedback from "@/utils/feedback";
import CrmLogisticsAdminDTO from "@/api/logistics/dto/CrmLogisticsAdminDTO";
import CrmLogisticsChargeSearchRequest from "@/api/logistics/request/CrmLogisticsChargeSearchRequest";
import {delLogisticsCharge, getLogisticsChargeListByPage} from "@/api/logistics/CrmLogisticsChargeController";

// 接收父组件传来的id
const props = defineProps<{
    id: number | null;
}>();

const detailRef = shallowRef(Detail)
const showMore = ref(true)
const showDetailRef = ref(false)
let {formatterCreateTime} = useFormatterTimeManager();



let queryFormData: UnwrapNestedRefs<CrmLogisticsChargeSearchRequest> = reactive(new CrmLogisticsChargeSearchRequest)

const {pagerData, getPageLists, resetParams, resetOnePage} = usePagerManager({
    fetchFun: getLogisticsChargeListByPage,
    params: queryFormData
})

function handleCreateOrder() {
    let routePathByName = routerManager.getRoutePathByName("logistics/client/charge/create");
    if (routePathByName) {
        router.push({path: routePathByName, query: {corporationId: queryFormData.corporationId as number}})
    }
}


async function handleEdit(row: any) {
    let routePathByName = routerManager.getRoutePathByName("logistics/client/charge/edit");
    console.log(routePathByName)
    if (routePathByName) {
        await router.push({path: routePathByName, query: {id: row.id}});
    }
}

async function handleDelete(row: any) {
    await feedback.confirm("确定删除这条记录吗？")
    await delLogisticsCharge({id: row.id})
    await getPageLists()
}


async function handleRowDetail(row: CrmLogisticsAdminDTO) {
    showDetailRef.value = true
    await nextTick()
    detailRef.value?.open(row.id)
}

function refresh() {
    getPageLists()
}

onMounted(async () => {
    if (props.id) {
        queryFormData.corporationId = props.id
    }
    getPageLists()
});

</script>